<template>
  <div>
    <div slot="headerContent">
      <div class="title">header展示:{{ userName }}</div>
    </div>
    <div slot="extra">
      <head-info title="xxx数" content="56" :bordered="true" />
      <head-info title="yyyy排名" content="8/24" :bordered="true" />
      <head-info title="extra展示" content="2,223" />
    </div>

    <a-divider />
    <a-row :gutter="8">
      <a-col :span="1" />
      <a-col :span="6">
        <a-steps progress-dot :current="12" direction="vertical">
          <a-step title="框架选择" description="springBoot + vue" />
          <a-step title="权限控制" description="菜单/功能/角色 CRUD,及其 权限绑定" />
          <a-step title="字典配置" description="字典CRUD,通用查找字典(mixns)" />
          <a-step title="代码生成" description="Mybatis Generator + plop " />
          <a-step title="定时任务" description="Quartz 动态设置任务" />
          <a-step title="登陆控制" description="JWT + easy-captcha" />
          <a-step title="常用组件" description="富文本, markdown, 图片查看, 图表" />
          <a-step title="Icon组件" description="" />
          <a-step title="图床" description="" />
          <a-step title="前端动态主题" description="" />
          <a-step title="日志系统" description="" />
          <a-step title="数据控制细节" description="修改自己, 删除校验, token刷新" />
          <a-step title="动态路由" description="restful-router 匹配控制" />
          <a-step title="组织架构丰富" description="地区-机构-部门-职务-人员" />
          <a-step title="邮箱配置" description="" />
          <a-step title="系统/缓存监控" description="" />
        </a-steps>
      </a-col>
      <a-col>
        <a-row>
          <a-col :span="8"><ve-line :data="chartData"></ve-line></a-col>
          <a-col :span="1" />
          <a-col :span="8"><ve-histogram :data="chartData2"></ve-histogram></a-col>
          <a-col :span="8"><ve-scatter :data="chartData3"></ve-scatter></a-col>
          <a-col :span="1" />
          <a-col :span="8"><ve-radar :data="chartData4"></ve-radar></a-col>
        </a-row>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

// import PageLayout from '../../layouts/PageLayout'
import HeadInfo from '../../components/tool/HeadInfo'

export default {
  name: 'WorkPlace',
  components: { HeadInfo },
  data() {
    return {
      chartData: {
        columns: ['日期', '访问用户', '下单用户', '下单率'],
        rows: [
          { 日期: '1/1', 访问用户: 1393, 下单用户: 1093, 下单率: 0.32 },
          { 日期: '1/2', 访问用户: 3530, 下单用户: 3230, 下单率: 0.26 },
          { 日期: '1/3', 访问用户: 2923, 下单用户: 2623, 下单率: 0.76 },
          { 日期: '1/4', 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
          { 日期: '1/5', 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
          { 日期: '1/6', 访问用户: 4593, 下单用户: 4293, 下单率: 0.78 }
        ]
      },
      chartData2: {
        columns: ['日期', '访问用户', '下单用户', '下单率'],
        rows: [
          { 日期: '1/1', 访问用户: 1393, 下单用户: 1093, 下单率: 0.32 },
          { 日期: '1/2', 访问用户: 3530, 下单用户: 3230, 下单率: 0.26 },
          { 日期: '1/3', 访问用户: 2923, 下单用户: 2623, 下单率: 0.76 },
          { 日期: '1/4', 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
          { 日期: '1/5', 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
          { 日期: '1/6', 访问用户: 4593, 下单用户: 4293, 下单率: 0.78 }
        ]
      },
      chartData3: {
        columns: ['日期', '访问用户', '下单用户', '年龄'],
        rows: {
          上海: [
            { 日期: '1/1', 访问用户: 123, 年龄: 3, 下单用户: 1244 },
            { 日期: '1/2', 访问用户: 1223, 年龄: 6, 下单用户: 2344 },
            { 日期: '1/3', 访问用户: 7123, 年龄: 9, 下单用户: 3245 },
            { 日期: '1/4', 访问用户: 4123, 年龄: 12, 下单用户: 4355 },
            { 日期: '1/5', 访问用户: 3123, 年龄: 15, 下单用户: 4564 },
            { 日期: '1/6', 访问用户: 2323, 年龄: 20, 下单用户: 6537 }
          ],
          北京: [
            { 日期: '1/1', 访问用户: 123, 年龄: 3, 下单用户: 1244 },
            { 日期: '1/2', 访问用户: 1273, 年龄: 6, 下单用户: 2344 },
            { 日期: '1/3', 访问用户: 3123, 年龄: 15, 下单用户: 4564 },
            { 日期: '1/4', 访问用户: 2123, 年龄: 9, 下单用户: 3245 },
            { 日期: '1/5', 访问用户: 4103, 年龄: 12, 下单用户: 4355 },
            { 日期: '1/6', 访问用户: 7123, 年龄: 10, 下单用户: 3567 }
          ],
          广州: [
            { 日期: '1/1', 访问用户: 123, 年龄: 3, 下单用户: 1244 },
            { 日期: '1/2', 访问用户: 1223, 年龄: 6, 下单用户: 2344 },
            { 日期: '1/3', 访问用户: 2123, 年龄: 30, 下单用户: 3245 },
            { 日期: '1/5', 访问用户: 4123, 年龄: 12, 下单用户: 4355 },
            { 日期: '1/4', 访问用户: 5123, 年龄: 18, 下单用户: 4564 },
            { 日期: '1/6', 访问用户: 3843, 年龄: 30, 下单用户: 4850 }
          ]
        }
      },
      chartData4: {
        columns: ['日期', '访问用户', '下单用户', '下单率'],
        rows: [
          { 日期: '1/1', 访问用户: 1393, 下单用户: 1093, 下单率: 0.32 },
          { 日期: '1/2', 访问用户: 3530, 下单用户: 3230, 下单率: 0.26 },
          { 日期: '1/3', 访问用户: 2923, 下单用户: 2623, 下单率: 0.76 },
          { 日期: '1/4', 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
          { 日期: '1/5', 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
          { 日期: '1/6', 访问用户: 4593, 下单用户: 4293, 下单率: 0.78 }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['userName', 'userAvatar'])
  },
  mounted() {},
  methods: {}
}
</script>

<style lang="less">
.head-info {
  display: inline-block;
}
</style>
